<template>
  <div class="app-container">
    <div class="mark">
      <span
        style="font-size: 20px; font-weight: bold; margin-left: 10px"
        class="mark-item"
      >bug率计算</span>
    </div>

    <el-row :gutter="10" type="flex" class="count-table">
      <el-col :span="7">
        <div class="lebal">请选择业务线:</div>
        <el-select
          ref="select"
          v-model="listQuery.group_name"
          clearable
          placeholder="请选择业务线"
          class="group"
          @change="getProjectN"
        >
          <el-option
            v-for="item in group_namelist"
            :key="item.group_name"
            :label="item.group_name"
            :value="item.group_id"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <div class="lebal">请选择产品线:</div>
        <el-select
          v-model="listQuery.project_name"
          clearable
          placeholder="请选择产品线"
          class="project"
          @change="getVersionN"
        >
          <el-option
            v-for="item in project_namelist"
            :key="item.project_name"
            :label="item.project_name"
            :value="item.project_id"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <div class="lebal">请选择版本号:</div>
        <el-select
          v-model="listQuery.version_numb"
          clearable
          placeholder="请选择版本号"
          class="version"
          @change="getCalculationParam"
        >
          <el-option
            v-for="item in version_list"
            :key="item.project_version_name"
            :label="item.project_version_name"
            :value="item.project_version_name"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <div class="lebal">备注:</div>
        <el-input v-model="listQuery.note" placeholder="请输入备注" />
      </el-col>
      <el-col v-for="item in list" :key="item.name" :span="7">
        <div class="lebal">{{ item.title }}:</div>
        <el-input
          v-model="listQuery[item.name]"
          :placeholder="'请选择' + item.title"
          :class="item.class"
          @blur="BlurText($event)"
        />
      </el-col>
    </el-row>
    <div class="mark_beckup">
      <span
        style="font-size: 16px; font-weight: bold; margin-left: 5px"
        class="mark-item"
      >bug密度标准值：{{ bugmid }}</span>
      <span
        style="font-size: 16px; font-weight: bold; margin-left: 5px"
        class="mark-item"
      >bug引入率标准值：{{ introerror }}</span>
    </div>
    <el-row style="margin-top: 20px" class="btns">
      <el-button
        type="primary"
        class="query_btn"
        @click="getBugdata"
      >计算</el-button>
      <el-button
        type="info"
        class="query_btn"
        @click="clearBugdata"
      >清空</el-button>
    </el-row>
    <el-card v-if="isCount" class="result-card">
      <div slot="header">
        <span>计算结果</span>
      </div>
      <div class="card-body">
        <div>
          Bug密度：<span>{{ error_density }}</span>
        </div>
        <div>
          首轮漏测率：<span>{{ missing_first_round }}</span>
        </div>
        <div>
          引入错误率：<span>{{ introduction_error_rate }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { getGroupName, getProjectName } from '@/api/report'
import {
  getBugdata,
  projectVersionName,
  getCalcuParam
} from '@/api/bug-calculate'
import { queryData } from '@/api/quallity-standard'

export default {
  name: 'BugCalculates',
  data() {
    return {
      bugmid: '',
      introerror: '',
      isCount: false,
      list: [
        {
          title: '检查点数量',
          name: 'checkpoint_numb',
          class: 'checkpoints'
        },
        {
          title: 'bug总数',
          name: 'bug_totals',
          class: 'bugtotals'
        },
        {
          title: '首测bug数量',
          name: 'frist_bugs',
          class: 'fristbugs'
        },
        {
          title: '漏测bug数量',
          name: 'miss_bugs',
          class: 'missbugs'
        },
        {
          title: '新出现bug数量',
          name: 'new_bugs',
          class: 'newbugs'
        }
      ],
      listQuery: {
        group_name: '',
        project_name: '',
        version_numb: '',
        checkpoint_numb: '',
        note: '',
        bug_totals: '',
        frist_bugs: '',
        miss_bugs: '',
        new_bugs: ''
      },
      group_namelist: '',
      project_namelist: '',
      version_list: '',
      total: '',
      error_density: '',
      missing_first_round: '',
      introduction_error_rate: ''
    }
  },
  created() {
    this.getGroupN()
    this.tableQueryData()
  },
  methods: {
    tableQueryData() {
      queryData().then((res) => {
        if (res.code === 20000) {
          this._data.bugmid = res.data.bugmid
          this._data.total = res.data.total
          this._data.datatime = res.data.datatime
          this._data.introerror = res.data.introerror
        } else {
          Message.error(res.message)
        }
      })
    },
    BlurText(e) {
      if (e != null) {
        const boolean = new RegExp('^[0-9][0-9]*$').test(e.target.value)
        if (!boolean) {
          this.$message.warning('请输入整数')
          e.target.value = ''
        }
      }
    },
    getGroupN() {
      getGroupName()
        .then((res) => {
          this.group_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getVersionN(projectId) {
      if (!projectId) {
        this.version_list = ''
        this.listQuery.version_numb = ''
        this.listQuery.new_bugs = ''
        this.listQuery.bug_totals = ''
        this.listQuery.frist_bugs = ''
        this.listQuery.miss_bugs = ''
        return
      }
      projectVersionName(projectId)
        .then((res) => {
          this.version_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getProjectN(groudId, e) {
      this.project_namelist = ''
      this.listQuery.project_name = ''
      this.version_list = ''
      this.listQuery.version_numb = ''
      this.listQuery.new_bugs = ''
      this.listQuery.bug_totals = ''
      this.listQuery.frist_bugs = ''
      this.listQuery.miss_bugs = ''
      this.getGroupN()
      if (!groudId) {
        return
      }
      getProjectName(groudId)
        .then((res) => {
          this.project_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getCalculationParam(version_name) {
      if (!version_name) {
        this.listQuery.new_bugs = ''
        this.listQuery.bug_totals = ''
        this.listQuery.frist_bugs = ''
        this.listQuery.miss_bugs = ''
        return
      }
      const query = {
        version_name: version_name,
        project_id: this.listQuery.project_name // 值是id
      }
      getCalcuParam(query)
        .then((res) => {
          this.listQuery.bug_totals = res.data.bug_totals
          this.listQuery.frist_bugs = res.data.frist_bugs
          this.listQuery.miss_bugs = res.data.miss_bugs
          this.listQuery.new_bugs = res.data.new_bugs
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getBugdata() {
      let list = {}
      let mark = true
      const group_name = document
        .getElementsByClassName('group')[0]
        .getElementsByTagName('input')[0].value
      const project_name = document
        .getElementsByClassName('project')[0]
        .getElementsByTagName('input')[0].value
      const version_numb = document
        .getElementsByClassName('version')[0]
        .getElementsByTagName('input')[0].value
      for (const item in this.listQuery) {
        if (this.listQuery[item] === '') {
          if (item === 'note') {
            continue
          }
          mark = false
          break
        }
      }
      if (!mark) {
        this.$message({
          type: 'error',
          message: '除备注以外均不可为空'
        })
      } else {
        list = {
          ...this.listQuery,
          group_name,
          project_name,
          version_numb
        }
        getBugdata(list).then((res) => {
          if (res.code === 20000) {
            this.error_density = res.data.bugdensity
            this.missing_first_round = res.data.fristleak
            this.introduction_error_rate = res.data.bringerror
            this.isCount = true
          } else {
            Message.error(res.message)
          }
        })
      }
    },
    clearBugdata() {
      this.isCount = false
      this.listQuery.group_name = ''
      this.listQuery.project_name = ''
      this.listQuery.version_numb = ''
      this.listQuery.checkpoint_numb = ''
      this.listQuery.bug_totals = ''
      this.listQuery.frist_bugs = ''
      this.listQuery.new_bugs = ''
      this.listQuery.miss_bugs = ''
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 22px;
  border-bottom: 1px solid black;
}
.mark {
  border-radius: 4px;
  margin: 10px 0 30px;
  background-color: #1890ff;
  height: 40px;
  line-height: 40px;
  color: #fff;
}
.mark_beckup {
  margin: 10px 10px 30px;
  background-color: #909399;
  height: 40px;
  width: 500px;
  line-height: 40px;
  color: #fff;
}
.mark .fmark-item {
  margin-right: 20px;
}
.from {
  min-height: 120px;
  padding: 14px;
  margin: 24px;
  border: solid 0.5px rgba(142, 142, 144, 0);
  border-radius: 4px;
}
.el-row--flex {
  flex-wrap: wrap;
}
.el-input {
  width: auto;
}
.count-table .el-col {
  margin-bottom: 15px;
}
.count-table .el-col .lebal {
  line-height: 40px;
  float: left;
  margin: 0 10px 0px 20px;
}
.count-table .el-col .el-input,
.count-table .el-col .el-select {
  float: left;
}
.btns {
  text-align: center;
}
.btns button {
  margin-right: 0;
  color: #fff;
}
.result-card {
  margin-top: 40px;
  width: 500px;
  font-size: 20px;
}
.card-body div {
  margin-bottom: 20px;
  color: #7dbb44;
}
.card-body div span {
  color: #000;
}
</style>
